class Cart{
    // 删除购物车商品的id
    delID = null;
      // 保存+号的 延时器返回值
      times = '';
      // 保存-号的 延时器返回值
      timess = '';
    constructor(){
      
        this.isLogin();
        this.getData();
        this.binEve();


    }
    // 事件绑定
    binEve(){
        // 给全选按钮绑定事件
        this.$('.contentbox .checkkk').addEventListener('click',this.allChenkFn)
         // 将单个商品所有的点击事件 委托给goodslist
         this.$('.goodslist').addEventListener('click',this.dispatch.bind(this))
        //    手动输入到input 数量
          this.$('.goodslist').addEventListener('change',this.changeNum.bind(this))
          this.$('.goodslist').addEventListener('input',this.inputNum)


    }


    // 全选按钮的方法
    allChenkFn =(eve) =>{
        // console.log(11);
        // 获取全选按钮的状态
        let tar = eve.target;
         //console.log(tar.checked);
        //    让单个商品跟随全选的状态
            this.oneGoodsStatus(tar.checked);
            // 统计数量和价格 
            this.totalNP(); 
           



    }
    //  单选
    oneGoodsStatus(s){
        this.$('.checkbox').forEach(input=>{
            // console.log(input);
            input.checked = s;
            
            
        })
    }

    // 事件委托
    dispatch(eve){
        // console.log(eve.target);
        // 通过class选出 单个商品个input
        if(eve.target.classList.contains('checkbox')) this.oneGoosdChecked(eve.target);
        // 判断点击的是否为删除按钮
        if(eve.target.classList.contains('dell')) this.delOneGoosd(eve.target);
        // 判断点击的是否为+
        if(eve.target.classList.contains('plus')) this.plusNunFN(eve.target);
        // 判断点击的是否为-
        if(eve.target.classList.contains('mins')) this.minsNunFN(eve.target);



    }
    // 数量的增加
    plusNunFN=(tar)=>{
        // console.log(tar);
        // 获取每个商品id
        let li = tar.parentNode.parentNode;
        let goodsId = li.dataset.id;
        // console.log(goodsId);
        // 获取数量的input
        let input = tar.previousElementSibling; //previousElementSibling 上一个节点
        // console.log(input);
        let val = input.value-0; //-0 转成数字类型 隐式转换
       // console.log(val);  
        val++;
        input.value = val;
        // 更新小计
        this.updateXJ(li)
         clearTimeout(this.times)  // 先清空一次
         // 更新数据库到后台，减少响应次数
         this.times = setTimeout(()=>{
            // 发送ajax请求
            axios.post('http://localhost:8888/cart/number',
            { id:localStorage.getItem('user_id'),  //当前登录用户 id
            goodsId,  //要修改的商品 id
            number:val  //要修改的购买数量
        })


        },500)
         // 统计数量和价格 
         this.totalNP(); 

        
    }


    // 数量的减少
    minsNunFN=(tar)=>{
        // console.log(tar);
        // 获取每个商品的id
        let li = tar.parentNode.parentNode;
        let goodsId = li.dataset.id;
        // console.log(goodsId);
        let input = tar.nextElementSibling;  //nextElementSibling 下一个节点
        // console.log(input); 
        let val = input.value - 0;
        // console.log(val);
        
        if(val == 1){
            layer.open({
                title: '温馨提示'
                ,content: '商品的数量不能为0哦'
              });
        }else{
            val--;
            input.value = val;
        }
         // 更新小计
        this.updateXJ(li)


        clearTimeout(this.timess)  // 先清空一次
        // 更新数据库到后台，减少响应次数
        this.timess = setTimeout(()=>{
           // 发送ajax请求
           axios.post('http://localhost:8888/cart/number',
           { id:localStorage.getItem('user_id'),  //当前登录用户 id
           goodsId,  //要修改的商品 id
           number:val  //要修改的购买数量
       })


       },500)
        // 统计数量和价格 
        this.totalNP(); 

    }


   // 更新小计的方法
   updateXJ(li){ 
    // 获取单价， 数量， 小计的节点
    let pricce = li.querySelector('.price').innerHTML;  //单价
    let  num = li.querySelector('.itxt').value;      //数量
    let xj = li.querySelector('.sum');   //小计
    xj.innerHTML = pricce * num;
    // console.log(pricce,num,xj);
   }


    // 删除的方法
    delOneGoosd=(tar)=>{
        let li = tar.parentNode;
        // console.log(li);
        this.delID = li.dataset.id;
         //console.log(this.delID);
        // console.log(tar);
        layer.confirm('是否确认删除？', {title:"确认删除框"}, function(){
            // console.log('yes');
            //  删除页面中的标签，删除数据库中的数据
            // console.log(this.delID);
            li.remove();
            axios.get('http://localhost:8888/cart/remove',{
                id: localStorage.getItem('user_id'),
                goodsId : this.delID
            }).then(res=>{
                // console.log(res);
                
            })
            
            layer.closeAll();
             // 统计数量和价格 
            this.totalNP()

           



        }.bind(this))
    }
    // 单个商品选中
    oneGoosdChecked(tar){
        //  console.log(tar.checked);
        // 判断单个商品的状态是取消 则全选直接取消
        if(!tar.checked) this.$('.contentbox .checkkk').checked = false;
          if(tar.checked){
            // ...将伪数组转为真数组
            let res = [...this.$('.checkbox')].some(input => !input.checked);
            // console.log(res);
            // res 为false  说明页面都被选中
            if(!res) this.$('.contentbox .checkkk').checked = true;
         
          }

            // 统计数量和价格 
            this.totalNP(); 

    }

    // 统计选中数量和价格
    totalNP(){ 
        let numT = 0;  
            let priceT= 0;
        this.$('.checkbox').forEach(input=>{
            // console.log(input,input.checked) 
            // 如果状态是选中，则统计数量和价格
            
            if(input.checked){
                let li = input.parentNode;
                // console.log(li);
                let num = li.querySelector('.itxt').value -0;  //获取数量 -0 是转为数值类型 隐式转换
                let price = li.querySelector('.sum').innerHTML -0;   //获取小计
                // console.log(num,price); 
                numT+=num;
                priceT+=price;

            }
            
        })
        // 使用indexof 找. 如果找不到就返回-1 找到返回1
       let res = priceT+ " " ;
        res = res.indexOf('.');  
        //  console.log(res); 
        // 判断 如果indexOf返回-1时候在后面加个.00
        if(res == -1) priceT += ".00";
        // console.log(numT,priceT);
        // 放在页面的统计数量
        this.$('.contentbtm b').innerHTML = numT;  //总数量
            //  总价格
        this.$('.contentbtm i').innerHTML =  priceT; 

    }

    isLogin(){
        let id = localStorage.getItem('user_id');
        // 登录成功后调回来
        if(!id) location.href = './login.html?returnUrl=./cart.html';
    }

    // 获取购物车数据
     async getData(){
        let data = await axios.get('http://localhost:8888/cart/list',{id:localStorage.getItem('user_id')
    });
    // console.log(data);
    if(!data) return; //没有数据就返回
    let {code,cart} = JSON.parse(data);

    if(code == 1){
        //console.log(cart);
        let html = '';
        cart.forEach(goods => {
            html+=`
            <li  data-id=${goods.goods_id}>
              <input type="checkbox" class="checkbox"/>
              <img src="${goods.img_small_logo}" alt="" />
              <div class="ming">${goods.title}</div>
              <div class="price">${goods.price}</div>
              <div class="checknum">
                <b class="mins">-</b>
                <input type="text"  value="${goods.cart_number}" class="itxt"/>
                <b class="plus">+</b>
              </div>
              <div class="sum">${parseInt(goods.price*goods.cart_number*100)/100}</div>
              <div class="dell">X</div>
            </li>`;
            
        });
        // 追加到页面中
        this.$('.goodslist').innerHTML = html;
    }

//登录过期  跳转到登录页面 然后就跳回到当前页面
    if(code == 401 || code == 0){
        location.href = 'login.html?returnUrl=./cart.html'; 
    }

    }



    changeNum(eve){
    // console.log(eve.target);
    // 获取li
    let li = eve.target.parentNode.parentNode;
     // 获取商品的id
    let goodsId = li.dataset.id;
    console.log(li);
    
    // 判断是否为input
    let tar = eve.target;
    if(tar.classList.contains('itxt')){
        let val = tar.value;
        // console.log(val);
        // 判断是否为0
        if(val == 0){
            layer.alert('数量不能为0', {})
            tar.value = 1;
        }
        // 发送ajax请求
        axios.post('http://localhost:8888/cart/number',
        { id:localStorage.getItem('user_id'),  //当前登录用户 id
        goodsId,  //要修改的商品 id
        number:tar.value  //要修改的购买数量
    })

    }
    // 更新小计
    this.updateXJ(li)

    }

    // 直接输入数量的input
    inputNum=(eve)=>{
        let tar = eve.target;
        // console.log(tar.value);
        let numReg = /^\d+$/;
        // console.log(tar.value);
        // 如果非数字 设置为1
        if(!numReg.test(tar.value)) tar.value = 1;


    }

    // 获取节点
    $(ele){
        let res = document.querySelectorAll(ele);
        return res.length == 1? res[0] : res;
    }
}
new Cart;